<template>
  <Modal title="问卷查看"
         id="questionnaire-management-detail"
         width="800"
         :mask-closable="false"
         :footer-hide="true"
         v-model="visible">
    <div class="wrap">
      <div class="part part1">
        <div class="title">单选题</div>
        <ul class="desc">
          <li v-if="item.exerciseType==0"
              class="item-title"
              v-for="(item,index) in questionnaireInfo"
              :key="index">
            <div>{{item.exerciseName}}</div>
            <ul class="options">
              <li v-for="it in item.exercisesAnswersList">
                <span>{{it.answerOption}}</span>
                <span>:</span>
                <span>{{it.answer}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div v-if="0"
           class="part part2">
        <div class="title">多选题</div>
        <ul class="desc">
          <li v-if="item.exerciseType==1"
              class="item-title"
              v-for="(item,index) in questionnaireInfo"
              :key="index">
            <div>{{item.exerciseName}}</div>
            <ul class="options">
              <li v-for="it in item.exercisesAnswersList">
                <span>{{it.answerOption}}</span>
                <span>:</span>
                <span>{{it.answer}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="part part3">
        <div class="title">主观题</div>
        <ul class="desc">
          <li v-if="item.exerciseType==2"
              class="item-title"
              v-for="(item,index) in questionnaireInfo"
              :key="index">
            <div>{{item.exerciseName}}</div>
          </li>
        </ul>
      </div>
    </div>
  </Modal>
</template>

<script>
import { queryQuestionnaireInfo } from '@/api/management'
export default {
  data () {
    return {
      dataForm: {},
      visible: false,
      questionnaireName: '',
      questionnaireInfo: []
    }
  },
  methods: {
    init (row) {
      this.visible = true
      this.$nextTick(() => {
        queryQuestionnaireInfo(row.questionnaireId).then(res => {
          this.questionnaireName = res.data.questionnaireName
          this.questionnaireInfo = res.data.questionnaireExercisesList
        })
      })
    }
  }
}
</script>
<style lang="scss">
#questionnaire-management-detail {
  .wrap {
    max-height: 400px;
    overflow: auto;
    .part {
      width: 100%;
      .title {
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
      }
      .desc {
        .item-title {
          font-weight: bold;
          margin-bottom: 10px;
        }
        .options {
          display: flex;
          & > li {
            margin-right: 20px;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>